<template>
  <div class="more-comment">
    <hm-header>
      <template #center>精彩跟帖</template>
    </hm-header>

    <div class="no-comment" v-if="commentList.length === 0">没有更多评论，快去添加评论吧～～</div>
    <hm-comment-item v-for="item in commentList" :key="item.id" :item="item"></hm-comment-item>

    <!-- 底线 -->
    <div class="bottom-line" v-if="commentList.length">我也是有底线的</div>
  </div>
</template>

<script>
import HmCommentItem from 'components/hm-comment-item.vue'
import { mapState } from 'vuex'

export default {
  data () {
    return {
      id: ''
    }
  },

  computed: {
    ...mapState([
      'commentList'
    ])
  },

  components: {
    HmCommentItem
  },

  created () {
    this.id = this.$route.params.id
    if (this.commentList.length === 0) {
      this.getComment()
    }
  },

  methods: {
    // 获取跟帖
    async getComment () {
      const { data: res } = await this.$axios.get(`/post_comment/${this.id}`)
      const { data, statusCode } = res
      if (statusCode !== 200) {
        return this.$toast.fail('获取跟帖失败')
      }
      this.$store.commit('getCommentList', data)
    }
  }
}
</script>

<style lang="scss" scoped>
.no-comment {
  padding-top: 100px;
  margin: 0 auto;
  text-align: center;
  font-size: 14px;
}
.bottom-line {
  height: 70px;
  line-height: 70px;
  text-align: center;
  color: #707070;
}
</style>
